<template>
  <div class="offline">
    <div class="offline-top">
      <!-- <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="70px"
        label-position="left"
        class="demo-ruleForm"
      >
        <el-form-item label="证件名称">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input v-model="ruleForm.num"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button type="info" icon="el-icon-refresh" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>-->
      <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
        <el-form-item label="预约号" prop="orderNum">
          <el-input v-model="formInline.orderNum" placeholder="请输入预约号"></el-input>
        </el-form-item>
        <el-form-item label="申请人名" prop="name">
          <el-input v-model="formInline.name" placeholder="请输入申请人名"></el-input>
        </el-form-item>
        <el-form-item label="办理状态" prop="commitStatus">
          <!-- <el-input size="small" v-model="formInline.commitStatus" placeholder="搜索办理状态"></el-input> -->
          <el-select v-model="formInline.commitStatus" placeholder="请选择">
            <el-option
              v-for="item in optionsTop"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetForm('formInline')">重置</el-button>
        </el-form-item>
        <el-form-item class="time" label="时间选择">
          <time-scope @receiptTime="storeTime" :vals="formInline.valNum"></time-scope>
        </el-form-item>
      </el-form>
    </div>
    <div class="offline-bottom">
      <div class="offline-b-top">
        <el-button type="primary" icon="el-icon-plus" @click="newph.newAppointment = true">新增排号</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="addoffline">批量删除</el-button>
      </div>
      <div class="offline-b-b">
        <el-tabs type="border-card" v-model="activeName" @tab-click="tabchange">
          <!-- 待办里 -->
          <el-tab-pane label="待办理" name="4">
            <el-table
              :data="tableData"
              style="width: 100%"
              ref="tableData"
              border
              :span-method="cellMerge"
              :cell-style="{ background: '#fff' }"
              @selection-change="tableDataChange"
            >
              <el-table-column label="序号" type="index" width="60"></el-table-column>
              <!-- <el-table-column prop="dan_number" label="单号" width="180"></el-table-column> -->
              <el-table-column align="center" prop="name" label="申请人姓名" width="180"></el-table-column>
              <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
              <el-table-column prop="submit_time" label="预约时间" width="180"></el-table-column>
              <el-table-column prop="business_number" label="业务个数" width="180" align="center"></el-table-column>
              <el-table-column label="办理状态" min-width="30%">
                <template slot-scope="scope">
                  <p v-if="scope.row.commitStatus == 1">待办理</p>
                  <p v-if="scope.row.commitStatus == 2">已办理</p>
                  <p v-if="scope.row.commitStatus == 3">已跳过</p>
                </template>
              </el-table-column>
              <el-table-column prop="order_number" label="预约号码" width="180" align="center"></el-table-column>
              <el-table-column prop="operate" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleEdit(scope.$index, scope.row, false , 2)"
                  >办结</el-button>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleEdit(scope.$index, scope.row, true)"
                  >查看业务</el-button>
                  <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- 已办理 -->
          <el-tab-pane label="已办理" name="2">
            <el-table
              :data="tableDatalater"
              style="width: 100%"
              border
              ref="tableData"
              :span-method="cellMerge"
              :cell-style="{ background: '#fff' }"
              @selection-change="tableDataChange"
            >
              <el-table-column label="序号" type="index" width="60"></el-table-column>
              <!-- <el-table-column prop="dan_number" label="单号" width="180"></el-table-column> -->
              <el-table-column align="center" prop="name" label="申请人姓名" width="180"></el-table-column>
              <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
              <el-table-column prop="submit_time" label="预约时间" width="180"></el-table-column>
              <el-table-column prop="business_number" label="业务个数" width="180" align="center"></el-table-column>
              <el-table-column label="办理状态" min-width="30%">
                <template slot-scope="scope">
                  <p v-if="scope.row.commitStatus == 1">待办理</p>
                  <p v-if="scope.row.commitStatus == 2">已办理</p>
                  <p v-if="scope.row.commitStatus == 3">已跳过</p>
                </template>
              </el-table-column>
              <el-table-column prop="order_number" label="预约号码" width="180" align="center"></el-table-column>
              <el-table-column prop="operate" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleEdit(scope.$index, scope.row, true)"
                  >查看业务</el-button>
                  <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <!-- 跳过项 -->
          <el-tab-pane label="跳过项" name="3">
            <el-table
              :data="tableDataskip"
              style="width: 100%"
              border
              ref="tableData"
              :span-method="cellMerge"
              :cell-style="{ background: '#fff' }"
              @selection-change="tableDataChange"
            >
              <el-table-column label="序号" type="index" width="60"></el-table-column>
              <!-- <el-table-column prop="dan_number" label="单号" width="180"></el-table-column> -->
              <el-table-column align="center" prop="name" label="申请人姓名" width="180"></el-table-column>
              <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
              <el-table-column prop="submit_time" label="预约时间" width="180"></el-table-column>
              <el-table-column prop="business_number" label="业务个数" width="180" align="center"></el-table-column>
              <el-table-column label="办理状态" min-width="30%">
                <template slot-scope="scope">
                  <p v-if="scope.row.commitStatus == 1">待办理</p>
                  <p v-if="scope.row.commitStatus == 2">已办理</p>
                  <p v-if="scope.row.commitStatus == 3">已跳过</p>
                </template>
              </el-table-column>
              <el-table-column prop="order_number" label="预约号码" width="180" align="center"></el-table-column>
              <el-table-column prop="operate" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleEdit(scope.$index, scope.row, false , 2)"
                  >办结</el-button>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleEdit(scope.$index, scope.row, false, 3)"
                  >跳过</el-button>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleEdit(scope.$index, scope.row, true)"
                  >查看业务</el-button>
                  <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 新增排号对话框 -->
    <el-dialog title="新增排号" :visible.sync="newph.newAppointment" width="35%" destroy-on-close>
      <el-form :model="newph.newdata" ref="newph.newdata" label-width="120px" class="demo-newph">
        <el-form-item label="证件类型">
          <el-input v-model="newph.newdata.type" disabled style="width:50%"></el-input>
        </el-form-item>
        <!-- 上传证件 -->
        <el-form-item label="点击扫描证件" required>
          <el-button type="primary" @click="readidcard">点击扫描</el-button>
          <div class="s-imgs">
            <div class="imgs-top">
              <img :src="newph.newdata.imgtop" alt />
            </div>
            <div class="imgs-bottom">
              <img :src="newph.newdata.imgbottom" alt />
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newph.newAppointment = false">取 消</el-button>
        <el-button type="primary" @click="newadd">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 排号对话框第二步 -->
    <el-dialog
      class="dialogBox"
      title="新增排号"
      :visible.sync="newph.second"
      width="40%"
      destroy-on-close
    >
      <el-form :model="newph.form">
        <el-form-item label="名称" label-width="80px">
          <el-input v-model="newph.form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="证件号码" label-width="80px">
          <el-input v-model="newph.form.idnumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮政编码" label-width="80px">
          <el-input v-model="newph.form.mailnumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" label-width="80px">
          <el-input v-model="newph.form.site" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" label-width="80px">
          <el-input v-model="newph.form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电子邮件" label-width="80px">
          <el-input v-model="newph.form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="业务选择">
          <br />
          <el-checkbox-group v-model="newph.types">
            <div class="form-layer" v-for="(item, index) in options" :key="index">
              <el-checkbox :label="item">{{ item.name }}</el-checkbox>
              <el-input-number size="small" v-model="item.num"></el-input-number>
            </div>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newph.second = false">取 消</el-button>
        <el-button type="primary" @click="newaddtwo">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog class="dialogBox" title="查看/编辑" :visible.sync="compile.newcompile" width="40%">
      <el-form :model="compile.form" :disabled="dis">
        <el-form-item label="排队编号" label-width="80px">
          <el-input v-model="compile.form.id" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称" label-width="80px">
          <el-input v-model="compile.form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="证件号码" label-width="80px">
          <el-input v-model="compile.form.idnumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" label-width="80px">
          <el-input v-model="compile.form.site" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" label-width="80px">
          <el-input v-model="compile.form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电子邮件" label-width="80px">
          <el-input v-model="compile.form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="业务选择" label-width="80px">
          <el-input v-model="compile.form.type" autocomplete="off" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="compile.newcompile = false">取 消</el-button>
        <el-button type="primary" @click="bianji">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看详情弹出框 -->
    <!-- <el-dialog class="dialogBox" title="查看/编辑" :visible.sync="compile.newcompiletwo" width="35%">
      <el-form :model="compile.form">
        <el-form-item label="排队编号" label-width="80px">
          <el-input v-model="compile.form.number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名称" label-width="80px">
          <el-input v-model="compile.form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="证件号码" label-width="80px">
          <el-input v-model="compile.form.idnumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" label-width="80px">
          <el-input v-model="compile.form.site" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" label-width="80px">
          <el-input v-model="compile.form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电子邮件" label-width="80px">
          <el-input v-model="compile.form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="业务选择" label-width="80px">
          <el-input v-model="compile.form.type" autocomplete="off" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="compile.newcompiletwo = false">取 消</el-button>
        <el-button type="primary" @click="compile.newcompiletwo = false">确 定</el-button>
      </span>
    </el-dialog>-->
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //tab数据
      activeName: "1",
      //搜索数据
      // ruleForm: {
      //   name: "",  // 证件名称
      //   num: "",  // 证件号码
      // },
      optionsTop: [
        {
          value: "1",
          label: "待办结",
        },
        {
          // value: "6",
          value: "2",
          label: "已办结",
        },
      ],
      formInline: {
        valNum: 1,
        startTime: "",  // 开始时间
        endTime: "",  // 结束时间
        orderNum: "",  // 预约号
        name: "",   // 申请人名字
        commitStatus: "",  // 状态
      },
      //未办理假数据
      tableData: [],
      //已办理假数据
      tableDatalater: [],
      //跳过的数据
      tableDataskip: [],
      //记录合并表单
      spanArr: [],
      pos: 0,
      //新增排号数据
      newph: {
        newAppointment: false,
        newdata: {
          type: "身份证",
          imgtop: "",
          imgbottom: "",
        },
        form: {
          name: "",
          idnumber: "",
          mailnumber: "",
          site: "",
          phone: "",
          type: [],
          email: "",
          taskNum: [],
        },
        types: [],
        //第二步
        second: false,
      },
      //编辑
      compile: {
        newcompile: false,
        newcompiletwo: false,
        form: {
          id: "",
          number: "",
          name: "",
          idnumber: "",
          site: "",
          phone: "",
          type: 0,
          email: "",
        },
      },
      //24个业务
      options: [],
      // 分页
      //第几页
      pageNum: 1,
      pageSize: 10,
      phnum: 1,
      total: 0,
      //是否可编辑
      dis: false,
      //存选中数组
      ids: [],
    };
  },
  methods: {
    //点击识别图片
    readidcard() {
      var strcmd = '{ "command": 10010}';
      this.socket.send(strcmd);
    },
    //识别图片返回信息
    openSocket() {
      this.socket = new WebSocket("ws://127.0.0.1:3417");
      this.socket.onmessage = (msg) => {
        var data = msg.data;
        if (typeof data === "string") {
          var obj = JSON.parse(data);
          if (obj.command == 20008) {
            if (obj.result) {
              this.newph.form.name = obj.Name;
              this.newph.form.idnumber = obj.IDNumber;
              this.newph.form.site = obj.Adress;
              this.newph.newdata.imgtop = "data:image/png;base64," + obj.image;
              this.newph.newdata.imgbottom =
                "data:image/png;base64," + obj.imageFull;
            } else {
              alert("获取失败");
            }
          }
        }
      };
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      if (this.ruleForm.name !== "") return this.search();
      this.tabisshow();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      if (this.ruleForm.name !== "") return this.search();
      this.tabisshow();
    },
    // 文件说明
    changeRxplain(file, fileList) {
      this.newph.newdata.imgfile = file.raw;
      this.newph.explainimg.push({
        name: file.name,
        url: file.url,
        id: file.uid,
      });
    },
    // 文件说明删除
    removeRxplain(file) {
      const index = this.newph.explainimg.findIndex(
        (el) => el.uid === file.uid
      );
      index !== -1 && this.newph.explainimg.splice(index, 1);
    },
    // 文件说明图片数量超出限制
    exceesLimitRxplain() {
      this.$message({
        type: "warning",
        message: "图片数量超出限制!",
      });
    },
    //搜索
    search() {
      if (this.activeName == 1) {
        this.$http
          .get("/trademark/order/listBackOrder", {
            pageSize: this.pageSize,
            pageNum: this.pageNum,

            orderNum: this.formInline.orderNum,  // 预约号  
            appname: this.formInline.name,  // 申请人
            status: this.activeName,  // 办理状态
            orderBgDate: this.formInline.startTime,  // 开始日期
            orderEdDate: this.formInline.endTime,  // 
            orderSr: 1, //  预约来源 ： 0 线上预约 1 线下预约
          })
          .then((res) => {
            if (res.data.code == 200) {
              this.tableData = res.data.data;
              this.total = res.data.data.total;
            } else {
              this.$message.error(res.data.message);
            }
          });
      }
      if (this.activeName == 2) {
        this.$http
          .get("/trademark/order/listBackOrder", {
            pageSize: this.pageSize,
            pageNum: this.pageNum,

            orderNum: this.formInline.orderNum,  // 预约号  
            appname: this.formInline.name,  // 申请人
            status: this.activeName,  // 办理状态
            orderBgDate: this.formInline.startTime,  // 开始日期
            orderEdDate: this.formInline.endTime,  // 
            orderSr: 1, //  预约来源 ： 0 线上预约 1 线下预约
          })
          .then((res) => {
            if (res.data.code == 200) {
              this.tableDatalater = res.data.data;
            } else {
              this.$message.error(res.data.message);

            }
          });
      }
      if (this.activeName == 3) {
        this.$http
          .get("/trademark/order/listBackOrder", {
            pageSize: this.pageSize,
            pageNum: this.pageNum,

            orderNum: this.formInline.orderNum,  // 预约号  
            appname: this.formInline.name,  // 申请人
            status: this.activeName,  // 办理状态
            orderBgDate: this.formInline.startTime,  // 开始日期
            orderEdDate: this.formInline.endTime,  // 
            orderSr: 1, //  预约来源 ： 0 线上预约 1 线下预约
          })
          .then((res) => {
            if (res.data.code == 200) {
              this.tableDataskip = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          });
      }
    },
    //重置
    resetForm() {
      for (let key in this.ruleForm) {
        this.ruleForm[key] = "";
      }
      this.tabisshow();
    },
    //接收时间
    storeTime(startTime, endTime) {
      this.formInline.startTime = startTime;
      this.formInline.endTime = endTime;
    },
    //批量删除
    addoffline() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .get("trademark/proAppoint/delProAppointBatchById", {
              params: {
                ids: this.ids,
              },
            })
            .then((res) => {
              if (res.data.code != 200) return this.$message.error("删除失败");
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch((error) => {
              this.$message.error("网络错误");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //未办理：
    //表格
    //结办
    handle(index, row) {
      this.$confirm("是否办理完该条业务?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .get("trademark/proAppoint/changeStatusById", {
              params: {
                id: row.id,
              },
            })
            .then((res) => {
              this.pagingapione();
              this.$message({
                type: "success",
                message: "办理成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //跳过
    skip(index, row) {
      this.$confirm("此操作将跳过办理该条业务, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .get("trademark/proAppoint/changeStatusById1", {
              params: {
                id: row.id,
              },
            })
            .then((res) => {
              this.pagingapione();
              this.$message({
                type: "success",
                message: "已跳过!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //编辑
    handleEdit(index, row) {
      if (this.activeName == 2) {
        this.dis = true;
      } else {
        this.dis = false;
      }
      this.compile.newcompile = true;
      this.compile.form.id = row.id;
      // this.compile.form.number = row.id;
      this.compile.form.name = row.name;
      this.compile.form.idnumber = row.identCode;
      this.compile.form.site = row.address;
      this.compile.form.phone = row.phoneNum;
      this.compile.form.email = row.email;
      // this.compile.form.type = [row.businessId];
      this.compile.form.type = row.businessId;
    },
    //删除
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .get("trademark/proAppoint/removeById", {
              params: {
                id: row.id,
              },
            })
            .then((res) => {
              this.pagingapione();
              this.tabisshow();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //单选全选
    tableDataChange(val) {
      this.ids = [];
      val.forEach((item) => {
        this.ids.push(item.id);
      });
    },
    //记录需要合并的表格
    getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].name === data[i - 1].name) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    //合并表格
    cellMerge({ row, column, rowIndex, columnIndex }) {
      // if (
      //   columnIndex === 0 ||
      //   columnIndex === 1 ||
      //   columnIndex === 2 ||
      //   columnIndex === 3 ||
      //   columnIndex === 5 ||
      //   columnIndex === 6
      // ) {
      //   const _row = this.spanArr[rowIndex];
      //   const _col = _row > 0 ? 1 : 0;
      //   return {
      //     rowspan: _row,
      //     colspan: _col,
      //   };
      // }
    },
    //跳过:
    //办结
    vault() { },
    newadd() {
      this.newph.newAppointment = false;
      this.newph.second = true;
    },
    newaddtwo() {
      this.newph.second = false;
      this.newph.types.forEach((element) => {
        this.newph.form.type.push(element.id);
        this.newph.form.taskNum.push(element.num);
      });
      this.$http
        .post("/trademark/proAppoint/addBatch", {
          name: this.newph.form.name,
          identCode: this.newph.form.idnumber,
          postaCode: this.newph.form.mailnumber,
          address: this.newph.form.site,
          phoneNum: this.newph.form.phone,
          tnum: this.newph.form.taskNum,
          email: this.newph.form.email,
          bid: this.newph.form.type,
        })
        .then((res) => {
          this.tabisshow();
        });
    },
    bianji() {
      this.compile.newcompile = false;
      // const params = new URLSearchParams();
      // params.append("id", this.compile.form.id);
      // params.append("name", this.compile.form.name);
      // params.append("idnumber", this.compile.form.idnumber);
      // params.append("postaCode", this.compile.form.mailnumber);
      // params.append("address", this.compile.form.site);
      // params.append("phoneNum", this.compile.form.phone);
      // params.append("email", this.compile.form.email);
      const form = {
        id: this.compile.form.id,
        name: this.compile.form.name,
        identCode: this.compile.form.idnumber,
        postaCode: this.compile.form.mailnumber,
        address: this.compile.form.site,
        phoneNum: this.compile.form.phone,
        email: this.compile.form.email,
      };
      this.$http.post("/trademark/proAppoint/update", form).then((res) => {
        this.tabisshow();
      });
    },
    //tab事件
    tabchange(tab, event) {
      this.pageNum = 1;
      this.tabisshow();
    },
    //tab事件调用的接口
    tabisshow() {
      if (this.activeName === "4") {
        this.spanArr = [];
        this.pos = 0;
        this.pagingapione();
        // this.getSpanArr(this.tableData);
      }
      if (this.activeName === "2") {
        this.spanArr = [];
        this.pos = 0;
        this.pagingapitwo();
        // this.getSpanArr(this.tableDatalater);
      }
      if (this.activeName === "5") {
        this.spanArr = [];
        this.pos = 0;
        this.pagingapithree();
        // this.getSpanArr(this.tableDataskip);
      }
    },
    //接口
    //未办理分页接口
    pagingapione() {
      this.$http
        .get("/trademark/order/listBackOrder", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,

            orderNum: this.formInline.orderNum,  // 预约号  
            appname: this.formInline.name,  // 申请人
            status: 1,  // 办理状态
            orderBgDate: this.formInline.startTime,  // 开始日期
            orderEdDate: this.formInline.endTime,  // 
            orderSr: 1, //  预约来源 ： 0 线上预约 1 线下预约

          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data;
            this.total = res.data.data.total;
          } else {
            this.tableData = [];
            this.total = 0;
            this.$message.error("暂无数据");
          }
          // this.getSpanArr(this.tableData);
        });
    },
    //已办理分页
    pagingapitwo() {
      this.$http
        .get("/trademark/order/listBackOrder", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,

            orderNum: this.formInline.orderNum,  // 预约号  
            appname: this.formInline.name,  // 申请人
            status: 2,  // 办理状态
            orderBgDate: this.formInline.startTime,  // 开始日期
            orderEdDate: this.formInline.endTime,  // 
            orderSr: 1, //  预约来源 ： 0 线上预约 1 线下预约
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.tableDatalater = res.data.data;
            this.total = res.data.data.total;
          } else {
            this.tableDatalater = [];
            this.total = 0;
            this.$message.error("暂无数据");
          }
          // this.getSpanArr(this.tableData);
        });
    },
    //跳过分页
    pagingapithree() {
      this.$http
        .get("/trademark/order/listBackOrder", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,

            orderNum: this.formInline.orderNum,  // 预约号  
            appname: this.formInline.name,  // 申请人
            status: 3,  // 办理状态
            orderBgDate: this.formInline.startTime,  // 开始日期
            orderEdDate: this.formInline.endTime,  // 
            orderSr: 1, //  预约来源 ： 0 线上预约 1 线下预约
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.tableDataskip = res.data.data;
            this.total = res.data.data.total;
          } else {
            this.tableDataskip = [];
            this.total = 0;
            this.$message.error("暂无数据");
          }
          // this.getSpanArr(this.tableData);
        });
    },
    //24个业务
    business() {
      this.$http.get("trademark/class/findAll").then((res) => {
        res.data.data.forEach((item) => {
          item.num = 1;
        });
        this.options = res.data.data;
      });
    },
  },
  created() {
    // this.pagingapi(this.tableData);
  },
  mounted() {
    this.openSocket();
    this.pagingapione();
    this.business();
  },
};
</script>

<style lang="less" scoped>
.offline-top {
  width: 100%;
  .demo-ruleForm {
    max-width: 900px;
    display: flex;
    justify-content: space-between;
  }
}
.offline-bottom {
  .offline-b-b {
    margin-top: 30px;
  }
  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
  }
}
.offline {
  .dialogBox {
    .el-select {
      width: 100%;
    }
    .form-layer {
      display: flex;
      justify-content: space-between;
    }
  }
  .block {
    margin-top: 30px;
    /deep/.el-pager .number {
      background: #fff;
      border: 1px solid #dcdfe6;
      margin: 0 5px;
      border-radius: 2px;
      &.active {
        background-color: #409eff;
        color: #fff;
        border: 1px solid #409eff;
      }
    }
  }
  .s-imgs {
    margin-top: 22px;
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .imgs-top {
      width: 45%;
      height: 100%;
      img {
        width: 100%;
      }
    }
    .imgs-bottom {
      width: 45%;
      height: 100%;
      img {
        width: 100%;
      }
    }
  }
  .form-layer {
    padding: 8px 0;
  }
  .form-layer + .form-layer {
    border-top: 1px solid #eee;
  }
  .el-input-number {
    margin-top: 8px;
  }
}
</style>
